<template>
	<view>
		<view class="search">
			<u-search margin="20rpx" shape="square" ></u-search>
		</view>
		<view class="">
			<view class="box" v-for="item in goodslist" :key="item.id" @click="detail(item.id)">
				<view class="leftbox">
					<img :src="baseUrl+item.img" alt="">
				</view>
				<view class="rightbox">
					<view class="title">
						{{item.goodsname}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
					<view class="lowprice">
						￥{{item.market_price}}
					</view>
					<view class="text">
						3070评论 92%好评
					</view>
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	import {
		getGoodslist
	} from '../../request/app.js'
	export default {
		data() {
			return {
				goodslist: [],
				baseUrl: this.$imgUrl
			}
		},
		onLoad(options) {
			console.log(options.id);
			getGoodslist({
				cateid: options.id
			}).then(res => {
				console.log(res);
				this.goodslist = res.data.list.goodData
				console.log(this.goodslist);
			})
		},
		methods: {
			detail(id){
				uni.navigateTo({
					url: '../detail/detail?id='+id
				})
			}
		}
	}
</script>

<style>
	.search {
		width: 100%;
		background-color: #FF6040;
		height: 120rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.box {
		width: 100%;
		height: 280rpx;
		background-color: #fff;
		margin: 20rpx 0px;
	}

	.leftbox {
		width: 36%;
		height: 280rpx;
		padding: 12rpx;
		box-sizing: border-box;
		float: left;
	}

	.leftbox img {
		width: 100%;
		height: 100%;
	}

	.rightbox {
		box-sizing: border-box;
		float: right;
		width: 64%;
		height: 280rpx;
		padding: 12rpx;
	}

	.title {
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.price {
		color: #FF6040;
		margin-top: 14rpx;
		font: bold;
	}

	.lowprice {
		color: #ccc;
		text-decoration: line-through;
		margin-top: 4rpx;
		font-size: 14px;
	}

	.text {
		font-size: 15px;
		margin-top: 10rpx;
		color: grey;
	}
</style>
